import React, {Component} from 'react';
import {ActivityIndicator, Image, StyleSheet, Text, TextInput, TouchableHighlight, View,
AsyncStorage } from 'react-native';
// var utilMd5 = require('../utils/MD5Utils.js');
import MD5Utils from '../utils/MD5Utils';
import NetUtils from '../utils/NetUtils';
import Index from "./Index";
import AppConfigs from '../constacts/AppConfig'
const url = AppConfigs.URL;
const APPKEY = AppConfigs.APPKEY;
let appsecret =AppConfigs.APPSECRET;
let that;
export default class Login extends Component {
    constructor(props) {

        super(props);
        that = this;
        this.state = {
            isShow: null,
            userName: '',
            PWd: "",
        };

    }

    /**
     * 登录的方法
     * @param UserName 账号
     * @param Pwd 密码
     */
    login(UserName, Pwd) {
        that.setState({
            isShow: true
        });
        let fromData = that.initNetparam("test", 'test');
        NetUtils.post(url, fromData, (json) => {
            that.setState({
                isShow: false
            });
            // alert(json);
            if (json.success) {
                const {navigate} = that.props.navigation;
                //保存用户名字
                AsyncStorage.setItem("mobile","test",()=>{
                    alert("保存成功！")
                })
                navigate('Index')
            }
            else {
                alert(json.errorMsg);
            }

            // alert(json.errorMsg);//登录成功后跳转页面
        });
    }

    /**
     *  初始化请求参数
     * @returns {FormData}
     * @param UserName 登录账号
     * @param Pwd 登录秘密
     */
    initNetparam(UserName, Pwd) {
        var thistime = new Date().getTime();
        var str = 'test' + appsecret + thistime;
//md5加密  var appsign = utilMd5.md5(str);
        let appsign = MD5Utils(str);
        console.log("------test-----" + MD5Utils('test'));
        let fromData = new FormData();
        fromData.append("mobile", UserName);
        fromData.append("password", Pwd);
        fromData.append("viewtype", 1);
        appsign = appsign.replace("+", "%2B");
        appsign = appsign.replace("=", "%2A");
        console.log("-------appsigin----" + appsign);
        fromData.append("appsign", appsign);
        fromData.append("appkey", APPKEY);
        //时间戳不一样导致加密sigin 不同
        console.log("------" + new Date().getTime());
        fromData.append("date", thistime);
        return fromData;
    }

    /**
     * 加载主要布局
     * @returns {*}
     */
    view() {
        return (
            <View style={styles.container}>
                <View style={styles.up}>
                    <Image source={require('../images/icon_number.png')}
                           style={{width: 24, height: 24, marginLeft: 2}}/>
                    <TextInput underlineColorAndroid='transparent' style={{
                        height: 40, marginLeft: 10, width: 0, flex: 1, fontSize: 15,
                        paddingLeft: 20
                    }} placeholder="请输入账号" placeholderTextColor='#333' onChangeText={(userName) => {
                        this.setState({
                            userName: userName
                        })
                    } }/>
                </View>
                <View style={styles.down}>
                    <Image source={require('../images/icon_password.png')}
                           style={{width: 24, height: 24, marginLeft: 2}}/>
                    <TextInput underlineColorAndroid='transparent' style={{
                        height: 40, marginLeft: 10, width: 0, flex: 1, fontSize: 15,
                        paddingLeft: 20
                    }} placeholder='请输入密码' placeholderTextColor='#333' onChangeText={(pwd) => {
                        this.setState({
                            PWd: pwd
                        })
                    }}/>
                </View>
                <TouchableHighlight onPress={() => {
                    this.login(this.state.userName, this.state.PWd)
                }} activeOpacity={0} underlayColor="#FFFFFF">
                    <View style={styles.c}>
                        <Text style={styles.btn}>
                            登录
                        </Text>
                    </View>
                </TouchableHighlight>
            </View>
        )
    }

    render() {

        if (this.state.isShow) {
            return this.loadingview();
        }
        return this.view();
    }

    /**
     *
     * @returns {*}
     * 加载进度的view
     */
    loadingview() {
        return (
            <View style={styles.container1}>
                <ActivityIndicator size='large' color='red'/>
            </View>

        );
    }
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        flex: 1,

        backgroundColor: '#FFFFFF',

    },
    container1: {
        alignItems: 'center',
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#FFFFFF',

    },
    c: {
        marginLeft: 20,
        marginRight: 20,
        marginTop: 20,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        width: 335,
        height: 47,
        backgroundColor: '#13b7f6'
    },
    btn: {
        textAlign: 'center',
        color: 'white',
        fontSize: 19
    },
    down: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomColor: 'red',
        borderBottomWidth: 2,
        marginLeft: 20,
        marginRight: 20,
        marginTop: 20
    },
    up: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomColor: 'red',
        borderBottomWidth: 2,
        marginLeft: 20,
        marginRight: 20,
        marginTop: 60

    }
});